(function(Vue){
	// 函数内部的变量和外部隔离不冲突

	// 任务数据
	const todo_data = [
		{id:1,title:'吃饭',stat:false},
		{id:2,title:'睡觉',stat:false},
		{id:3,title:'打豆豆',stat:false},
	]

	app = new Vue({
		el:'#todoapp',
		data:{
			// 将数据放入Vue对象内,在页面中展示使用
			todo_data,
			// 存放用户输入数据(s双向数据绑定)
			inp_data:''
		},
		methods:{
			// 添加任务
			addTodo(ev){
				// 1: 获取文本框的内容(Vue数据双向数据绑定)
				if(this.inp_data == ''){
					return;
				}
				let data = {
					id:this.todo_data.length+1,
					title:this.inp_data,
					stat:false
				}

				// 2: 将文本框的内容写到页面中 (不对)
				// 2: 因为Vue有数据绑定(单项数据绑定),
				// 所以我们直接将数据添加到todo_data中,页面就会被改变
				// JS框架从以前大量操作DOM的时代将前段程序员解放出来,
				// 只需要关心数据的改变
				this.todo_data.push(data);

				// 3: 清空文本框内容
				// let inp = ev.target; // 不在需要表单内容
				// inp.value = '';
				// 直接修改vue数据,即可实现清空
				this.inp_data = ''

			},

			// 全选与选不选
			toggleAll(ev){
				// console.log(ev.target.checked);
				// 循环遍历数据修改状态
				// 状态值 直接获取checked 属性进行修改
				for(let i=0;i<this.todo_data.length;i++){
					this.todo_data[i].stat = ev.target.checked;
				}
				


			},

			// 删除任务
			removeTodo(k){
				// splice(下标,个数)
				this.todo_data.splice(k,1);
				// this.todo_data[k] = ''; // 不成功
			},

			// 删除已完成任务
			romveCompleted(){
				// 循环删除可以实现,也很简单,但是代码太多了,不爽
				// for(let i=0;i<this.todo_data.length;i++){
				// 	if(this.todo_data[i].stat == true){
				// 		this.todo_data.splice(i,1);
				// 	}
				// }

				// 通过 filter 方法对数组进行遍历筛选,留下未完成的任务
				// this.todo_data = this.todo_data.filter((v)=>{
				// 	if(v.stat == false){
				// 		return true;
				// 	}
				// });

				// stat 为false得到保留,直接重新赋值给todo_data
				this.todo_data = this.todo_data.filter(v=>!v.stat);

			}

		},

		computed:{
			getNu(){
				return (this.todo_data.filter((v)=>!v.stat)).length;
			}
		}
	});
})(Vue);

// console.log(Vue);